<template>
  <div class="infobox">
    <el-form :model="form" label-width="auto" :label-position="right">
      <el-form-item label="1.生命体征">
        <el-row>
          <el-col :span="4">
            <span class="inputtext">身高cm:</span> <el-input v-model="form.height" placeholder="" style="width: 80px" clearable />
          </el-col>
          <el-col :span="4">
            <span class="inputtext">体重kg:</span> <el-input v-model="form.weight" placeholder="" style="width: 80px" clearable
          /></el-col>
          <el-col :span="4">
            <span class="inputtext">腰围cm:</span>
            <el-input v-model="form.waistCircumference" placeholder="" style="width: 80px" clearable
          /></el-col>
          <el-col :span="4">
            <span class="inputtext">臀围cm:</span>
            <el-input v-model="form.hipCircumference" placeholder="" style="width: 80px" clearable
          /></el-col>

          <el-col :span="4">
            <span class="inputtext">血压mmHg:</span>
            <el-input v-model="form.bloodPressure" placeholder="" style="width: 80px" clearable
          /></el-col>
          <el-col :span="4">
            <span class="inputtext">心率 次/分:</span>
            <el-input v-model="form.heartRate" placeholder="" style="width: 80px" clearable
          /></el-col>
          <el-col :span="6">
            <span class="inputtext">握力kg:</span>
            <el-input v-model="form.gripStrengthLeft" placeholder="" style="width: 80px" clearable
          /></el-col>
        </el-row>
      </el-form-item>

      <el-form-item label="2.糖尿病史">
        <el-radio-group v-model="form.diabetesHistory" @change="tnbchange">
          <el-radio value="Y" size="large">有</el-radio>
          <el-radio value="N" size="large">无</el-radio>
        </el-radio-group>
        <el-select v-model="form.diabetesType" style="width: 150px; margin-left: 20px" :disabled="tnbtype">
          <el-option v-for="item in tnboptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>

      <el-form-item label="3.既往史(可多选)">
        <el-checkbox-group v-model="form.pastMedicalHistoryIds" @change="jwschangenew">
          <el-checkbox v-for="option in insuranceOptions" :key="option.value" :label="option.label" :value="option.value" />
        </el-checkbox-group>
        <el-input v-model="form.pastMedicalRemark" placeholder="" style="width: 200px" clearable :disabled="jwsqt" />
      </el-form-item>
      <el-form-item label="4.药物过敏史" @change="ywgmschange">
        <el-radio-group v-model="form.drugAllergyHistory">
          <el-radio value="Y" size="large">有</el-radio>
          <el-radio value="N" size="large">无</el-radio>
        </el-radio-group>
        <el-input v-model="form.drugAllergyRemark" placeholder="" style="width: 200px" clearable :disabled="drugAllergyHistory" />
      </el-form-item>

      <el-form-item label="5.当前治疗方式" @change="dqzlfschange">
        <el-checkbox-group v-model="form.currentTreatmentMethodIds">
          <el-checkbox v-for="option in tnbxqList" :key="option.value" :label="option.label" :value="option.value" />
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="6.运动习惯">
        <el-radio-group v-model="form.exerciseHabit">
          <el-radio v-for="option in exerciseOptions" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="7.主要运动方式">
        <el-input v-model="form.mainExerciseMethod" placeholder="" style="width: 200px" clearable />
      </el-form-item>

      <el-form-item label="8.饮食习惯">
        <el-radio-group v-model="form.dietHabit">
          <el-radio v-for="option in eatListHabit" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="9.吸烟史">
        <el-radio-group v-model="form.smokingHistory">
          <el-radio v-for="option in CheckOptions" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="10.戒除吸烟史">
        <el-radio-group v-model="form.smokingCessation">
          <el-radio v-for="option in jcxxslist" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="12.饮酒类别">
        <el-radio-group v-model="form.drinkingCategory">
          <el-radio v-for="option in yjListHabit" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="13.饮酒频次">
        <el-radio-group v-model="form.drinkingFrequency">
          <el-radio v-for="option in yjpllist" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="14.饮酒量">
        <el-input v-model="form.drinkingAmount" placeholder="" style="width: 200px" clearable />
      </el-form-item>

      <el-form-item label="15.戒除饮酒史">
        <el-radio-group v-model="form.drinkingCessation">
          <el-radio v-for="option in jcxxslist" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="16.职业">
        <el-radio-group v-model="form.occupation" @change="ybchangetwo">
          <el-radio v-for="option in zyxlOptions" :key="option.value" :value="option.value" size="large">
            {{ option.label }}
          </el-radio>
        </el-radio-group>
        <el-input v-model="form.occupationRemark" placeholder="" style="width: 200px" clearable :disabled="showzz" />
      </el-form-item>

      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item title="既往并发症" name="13" :disabled="tnbtype">
          <el-form-item label="1.急性并发症" @change="jfbzchange">
            <el-checkbox-group v-model="form.acuteComplicationsIds">
              <el-checkbox v-for="option in jfbzlist" :key="option.value" :label="option.label" :value="option.value" />
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="2.慢性并发症" @change="mxbfchange">
            <el-checkbox-group v-model="form.chronicComplicationsIds">
              <el-checkbox v-for="option in mxbflist" :key="option.value" :label="option.label" :value="option.value" />
            </el-checkbox-group>
          </el-form-item>

          <el-form-item label="3.血糖监测习惯">
            <el-radio-group v-model="form.bloodGlucoseMonitoringHabit">
              <el-radio value="Y" size="large">有</el-radio>
              <el-radio value="N" size="large">无</el-radio>
            </el-radio-group>
            <div v-if="form.bloodGlucoseMonitoringHabit == 'Y'" style="margin-left: 20px">
              <span>每周</span>
              <el-input v-model="form.bloodGlucoseMonitoringFrequency" placeholder="" style="width: 80px" clearable />
              <span>次</span>
              <span style="margin-left: 20px">有监测习惯标准：过去一个月内有血糖监测</span>
            </div>
          </el-form-item>

          <el-form-item label="4.血压监测习惯">
            <el-radio-group v-model="form.bloodPressureMonitoringHabit">
              <el-radio value="Y" size="large">有</el-radio>
              <el-radio value="N" size="large">无</el-radio>
            </el-radio-group>
            <div v-if="form.bloodPressureMonitoringHabit == 'Y'" style="margin-left: 20px">
              <span>每周</span>
              <el-input v-model="form.bloodPressureMonitoringFrequency" placeholder="" style="width: 80px" clearable />
              <span>次</span>
              <span style="margin-left: 20px">有监测习惯标准：过去一个月内有血压监测</span>
            </div>
          </el-form-item>

          <el-form-item label="4.家族史" @change="jzschange">
            <el-radio-group v-model="form.familyHistory">
              <el-radio value="Y" size="large">有</el-radio>
              <el-radio value="N" size="large">无</el-radio>
            </el-radio-group>
            <el-input v-model="form.familyHistoryRemark" placeholder="" style="width: 200px" clearable :disabled="jzschecktype" />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>

      <el-form-item>
        <div class="centerbox">
          <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { seekdataApi } from "@/api/system/system.js";
import { useRoute } from "vue-router";
import { AddbaseApi, getBaseInfoApi } from "@/api/hzmange/index.js";
import { ElMessage } from "element-plus";
const route = useRoute();
const routedata = reactive(route.query);
let insuranceOptions = ref([]);
let jzslist = [
  {
    id: 1,
    name: "糖尿病"
  },
  {
    id: 2,
    name: "高血压"
  },
  {
    id: 3,
    name: "心脏病"
  },
  {
    id: 4,
    name: "脑中风"
  },

  {
    id: 5,
    name: "肝病"
  },
  {
    id: 6,
    name: "肾病"
  },
  {
    id: 7,
    name: "痛风"
  }
];
let tnboptions = ref([]);
let tnbxqList = ref([]);
let jfbzlist = ref([]);
let mxbflist = ref([]);
let right = "right";
//给form里面的属性赋值为空
const form = ref({
  height: "", //身高
  weight: "", //体重
  waistCircumference: "", //腰围
  hipCircumference: "", //臀围
  bloodPressure: "", //血压
  heartRate: "", //心率
  gripStrengthLeft: "", //握力左
  diabetesHistory: "", //糖尿病史
  diabetesType: "", //糖尿病类型
  pastMedicalHistoryIds: [1], //既往史(可多选)
  //按照el-form属性赋值
  currentTreatmentMethodIds: [], //当前治疗方式
  exerciseHabit: "", //运动习惯
  mainExerciseMethod: "", //主要运动方法
  dietHabit: "", //饮食习惯
  smokingHistory: "", //吸烟史
  smokingCessation: "",
  pastMedicalRemark: "", //其他输入框内容
  drugAllergyHistory: "N", //药物过敏史
  drugAllergyRemark: "", //药物过敏史备注
  smokingCategory: "", //吸烟类别
  smokingFrequency: "", //吸烟频次
  smokingAmount: "", //吸烟量
  drinkingCategory: "", //饮酒类别
  drinkingFrequency: "", //饮酒频次
  drinkingAmount: "", //饮酒量
  drinkingCessation: "", //戒除饮酒史
  occupation: "", //职业
  occupationRemark: "", //职业备注
  acuteComplicationsIds: [], //急性并发症
  chronicComplicationsIds: [], //慢性并发症
  bloodGlucoseMonitoringHabit: "Y", //血糖监测习惯
  bloodPressureMonitoringHabit: "Y", //血压监测习惯
  familyHistory: "N", //家族史
  familyHistoryRemark: "",
  bloodGlucoseMonitoringFrequency: "", //血糖监测频率
  bloodPressureMonitoringHabit: "" //血压监测频率
});
let showqt = ref(true); //医保类型其他有输入框
let showzz = ref(true); //.职业类型其他有输入框
let jwsqt = ref(true); //既往史(可多选)

const onSubmit = () => {
  form.value.id = routedata.id;

  AddbaseApi(form.value).then(res => {
    //code是200，提示保存成功
    if (res.code == 200) {
      ElMessage({
        message: "保存成功",
        type: "success"
      });
    }
  });
};
const ybchange = e => {
  let hasAaa = form.value.yblxcheckList.includes("其他");
  showqt.value = !hasAaa;
};
const jwschangenew = e => {
  let yyjw = form.value.pastMedicalHistoryIds.includes("1");
  //点击一下其他，其他输入框显示
  let hasAaa = form.value.pastMedicalHistoryIds.includes("11");
  jwsqt.value = !hasAaa;
  if (yyjw) {
    //点击一下以下皆无，其他输入框消失
    form.value.pastMedicalHistoryIds = ["1"];
    form.value.pastMedicalRemark = "";
  }
};
//职业类型
let ybchangetwo = e => {
  if (e == 5) {
    showzz.value = false;
  } else {
    showzz.value = true;
    form.value.occupationRemark = "";
  }
};
//既往史(可多选)
let jwslist = ref();
//药物过敏史
let drugAllergyHistory = ref(true);
let ywgmschange = () => {
  let hasAaa = form.value.drugAllergyHistory.includes("Y");
  if (hasAaa) {
    drugAllergyHistory.value = !hasAaa;
  } else {
    form.value.drugAllergyRemark = "";
    drugAllergyHistory.value = true;
  }
};
//家族史
let jzschecktype = ref(true);
let jzschange = () => {
  if (form.value.familyHistory == "Y") {
    jzschecktype.value = false;
  } else {
    form.value.familyHistoryRemark = "";
    jzschecktype.value = true;
  }
};
//糖尿病史
let tnbtype = ref(false);
let tnbchange = () => {
  let hasAaa = form.value.diabetesHistory.includes("Y");
  if (hasAaa) {
    tnbtype.value = false;
  } else {
    form.value.diabetesType = "";
    form.value.tnbfxnf = "";
    tnbtype.value = true;
  }
};

const activeNames = ref([]);
const handleChange = val => {};

//当前治疗方式
let dqzlfschange = () => {
  let one = form.value.currentTreatmentMethodIds.includes("6"); //以下全无
  if (one) {
    form.value.currentTreatmentMethodIds = ["6"];
  }
};
//急性并发症
let jfbzchange = () => {
  let one = form.value.acuteComplicationsIds.includes("5"); //以下全无
  if (one) {
    form.value.acuteComplicationsIds = ["5"];
  }
};
//慢性并发症

let mxbfchange = () => {
  let one = form.value.chronicComplicationsIds.includes("7"); //以下全无
  if (one) {
    form.value.chronicComplicationsIds = ["7"];
  }
};
let zztdlist = [];
let yblist = [];
let exerciseOptions = ref([]);
let eatListHabit = ref([]);
let xyListHabit = ref([]);
let yjListHabit = ref([]);
let CheckOptions = ref([]);
let jcxxslist = ref([]);
let yjpllist = ref([]);
//职业类型
let zyxlOptions = ref([]);

getYZlsit();
//阈值接口-获取下拉框数据
function fetchInsuranceData(dictType) {
  return seekdataApi({ dictType }).then(res => {
    return res.data.map(item => ({
      value: item.dictValue,
      label: item.dictLabel
    }));
  });
}
//获取下拉框数据方法封装
function getYZlsit() {
  //是否
  fetchInsuranceData("sys_yes_no").then(data => {
    CheckOptions.value = data;
  });
  //民族
  fetchInsuranceData("sys_nationality").then(data => {
    yblist.value = data;
  });
  //医保类型
  fetchInsuranceData("jsys_insurance_type").then(data => {
    zztdlist.value = data;
  });
  //职业类型
  fetchInsuranceData("sys_occupation_type").then(data => {
    zyxlOptions.value = data;
  });
  //运动习惯
  fetchInsuranceData("sys_exercise_habit").then(data => {
    exerciseOptions.value = data;
  });
  // 运动方式
  fetchInsuranceData("sys_exercise_method").then(data => {
    zztdlist.value = data;
  });
  //饮食啫好
  fetchInsuranceData("sys_diet_preference").then(data => {
    eatListHabit.value = data;
  });
  //是否戒除
  fetchInsuranceData("sys_already_quit").then(data => {
    jcxxslist.value = data;
  });
  //饮酒频次
  fetchInsuranceData("sys_frequency").then(data => {
    yjpllist.value = data;
  });
  //饮酒类别
  fetchInsuranceData("sys_drinking_category").then(data => {
    yjListHabit.value = data;
  });
  //既往史
  fetchInsuranceData("sys_past_medical_history").then(data => {
    insuranceOptions.value = data;
  });
  //糖尿病型号
  fetchInsuranceData("sys_diabetes_type").then(data => {
    tnboptions.value = data;
  });
  //当前治疗方式
  fetchInsuranceData("sys_current_treatment_method").then(data => {
    tnbxqList.value = data;
  });
  //急性并发症
  fetchInsuranceData("sys_acute_complications").then(data => {
    jfbzlist.value = data;
  });
  //慢性并发症
  fetchInsuranceData("sys_chronic_complications").then(data => {
    mxbflist.value = data;
  });
  //医院名称
  fetchInsuranceData("sys_hospital_name").then(data => {
    zztdlist.value = data;
  });
  //项目状态
  fetchInsuranceData("sys_project_status").then(data => {
    zztdlist.value = data;
  });
}
getList();
function getList() {
  getBaseInfoApi({
    id: routedata.id
  }).then(res => {
    form.value = res.data;

    if (form.value.pastMedicalHistoryIds == null) {
      form.value.pastMedicalHistoryIds = [];
    }
    if (form.value.currentTreatmentMethodIds == null) {
      form.value.currentTreatmentMethodIds = [];
    }

    if (form.value.acuteComplicationsIds == null) {
      form.value.acuteComplicationsIds = [];
    }
    if (form.value.chronicComplicationsIds == null) {
      form.value.chronicComplicationsIds = [];
    }
  });
}
</script>
<style lang="scss" scoped>
.infobox {
  // height: 400px;
  overflow: auto;
}

.jwsclass {
  margin: 10px;
}
.centerbox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.inputtext {
  margin-left: 10px;
  color: #606266;
}
</style>
